<template>
    <div class="drawer_box">
        <el-drawer v-model="props.drawerVisible" title="新建发放规则" :with-header="false" size="28%" :append-to-body="true">
            <p class="drawerText">添加优惠券</p>
            <el-form :model="couponForm" label-width="auto" style="" :label-position="'top'">
                <el-form-item class="mt20"><el-input disabled placeholder="基础信息" /></el-form-item>
                <el-form-item label="优惠券名称"> <el-input v-model="couponForm.name" placeholder="" /> </el-form-item>
                <el-form-item label="优惠券类型">
                    <el-select v-model="couponForm.type" size="large">
                        <el-option v-for="item in ruleOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="发放数量">
                    <el-input v-model="couponForm.date" maxlength="300" placeholder="">
                        <template #suffix> 张 </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="使用期限">
                    <el-date-picker v-model="couponForm.number" type="datetimerange" range-separator="To"
                        start-placeholder="开始时间" end-placeholder="结束时间" />
                </el-form-item>
                <el-form-item label="领取限制">
                    <el-radio-group v-model="couponForm.maxQuantity"
                        style="width: 100%; align-items: flex-start;flex-direction: column">
                        <el-radio :label="0">数量不限</el-radio>
                        <el-row style="width: 100%;">
                            <el-col :span="6">
                                <el-radio :label="1">每人限制次数</el-radio>
                            </el-col>
                            <el-col :span="18">
                                <el-input v-model="couponForm.maxQuantity" placeholder="每人最多可领取数量">
                                    <template #suffix> 张 </template>
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="mt20"><el-input disabled placeholder="优惠设置" /></el-form-item>
                <el-form-item label="满减">
                    <el-radio-group v-model="signInNumber" class="df fdc w100" @change="handlesignIn">
                        <el-row class="aic ">
                            <el-col :span="5" class="df">
                                <el-radio :label="0">循环优惠</el-radio>
                            </el-col>
                            <el-col :span="19" class="df">
                                <el-text style="white-space: nowrap; padding-right: 3px">每满</el-text>
                                <el-input v-model="signInNumber" placeholder="输入">
                                    <template #suffix> 元 </template>
                                </el-input>
                                <el-text style="white-space: nowrap; padding: 0 3px">减</el-text>
                                <el-input v-model="signInNumber" placeholder="输入">
                                    <template #suffix> 元 </template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row class="aic mt20">
                            <el-col :span="5" class="df ">
                                <el-radio :label="1">阶梯优惠</el-radio>
                            </el-col>
                            <el-col :span="17" class="df">
                                <el-text style="white-space: nowrap; padding-right: 3px">满</el-text>
                                <el-input placeholder="输入">
                                    <template #suffix> 元 </template>
                                </el-input>
                                <el-text style="white-space: nowrap; padding: 0 3px">减</el-text>
                                <el-input placeholder="输入">
                                    <template #suffix> 元 </template>
                                </el-input>
                            </el-col>
                            <el-col :span="2" class="df jcse">
                                <el-icon :size="15">
                                    <RemoveFilled />
                                </el-icon>
                                <el-icon :size="15">
                                    <CirclePlusFilled />
                                </el-icon>
                            </el-col>
                        </el-row>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="折扣">
                    <el-row class="aic ">
                        <el-col :span="5" class="df ">
                            <el-checkbox label="阶梯折扣" size="large" />
                        </el-col>
                        <el-col :span="17" class="df">
                            <el-text style="white-space: nowrap; padding-right: 3px">满</el-text>
                            <el-input placeholder="输入">
                                <template #suffix> 元 </template>
                            </el-input>
                            <el-text style="white-space: nowrap; padding: 0 3px">打</el-text>
                            <el-input placeholder="输入">
                                <template #suffix> 折 </template>
                            </el-input>
                        </el-col>
                        <el-col :span="2" class="df jcse">
                            <el-icon :size="15">
                                <RemoveFilled />
                            </el-icon>
                            <el-icon :size="15">
                                <CirclePlusFilled />
                            </el-icon>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item class="jcfe">
                    <el-button class="drawer-btn" @click="isShowDrawer = false">取消</el-button>
                    <el-button class="drawer-btn sup-style" @click="handleSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
    RemoveFilled,
    CirclePlusFilled,
} from '@element-plus/icons-vue';
const props = defineProps({
    drawerVisible: {
        type: Boolean,
        require: true,
        default: true,
    }
})

const couponForm = ref({
    name: '',
    type: '',
    number: '',
    date: '',
    maxQuantity: '',

})
</script>

<style scoped lang="scss">
.drawer_box {
    .drawerText {
        font-size: 1.125rem;
        font-weight: 700;
    }
}

.drawer-btn {
    width: 90px;
    height: 40px;
    border-radius: 4px 4px 4px 4px;
}

.jcfe {
    ::v-deep(.el-form-item__content) {
        justify-content: flex-end;
    }
}

.sup-style {
    background-color: #2E5882;
    color: white
}
</style>